<template>
  <!-- 消息中心-全部消息 -->
  <div class="all_information">
    <!-- 单元格信息 -->
    <van-cell-group
      v-for="e in allTheNews.records"
      :key="e.id"
      @click="messageForDetails(e)"
    >
      <!-- 前面的图片 -->
      <!-- 有小红点 -->
      <van-badge dot v-if="e.isReader">
        <img :src="e.type == 1 ? picture1 : picture2" alt="" />
      </van-badge>
      <!-- 无小红点 -->
      <img :src="e.type == 1 ? picture1 : picture2" alt="" v-else />
      <!-- 单元格 -->
      <van-cell
        :value="e.createTime"
        is-link
        :label="'发布人:   ' + e.sourceName"
        center
      >
        <template #title>
          <span class="custom-title">{{
            e.type == 1 ? "系统消息" : "个人信息"
          }}</span>
          <van-icon :name="picture4" v-show="e.top == 1" />
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 进行判断:如果列表为空则展示 -->
    <van-empty
      v-if="allTheNews.total == 0"
      :image="picture3"
      description="暂无消息"
    />
  </div>
</template>

<script>
import { GetReads } from "@/request/api";
export default {
  data() {
    return {
      // 系统消息图片
      picture1: require("../assets/系统消息.png"),
      // 个人信息图片
      picture2: require("../assets/个人信息.png"),
      // 暂无消息
      picture3: require("../assets/暂无消息.png"),
      // 置顶
      picture4: require("../assets/置顶.png"),
    };
  },
  props: ["allTheNews"],
  methods: {
    messageForDetails(item) {
      //   if (item.isReader == 1) {
      //     console.log(JSON.stringify(item.id));
      //     GetReads({ id: JSON.stringify(item.id) }).then((res) => {
      //       console.log(res);
      //     });
      //   }

      //跳转并把id带过去
      //   console.log(item.id);
      this.$router.push({
        path: "/informationDetails",
        query: { info: JSON.stringify(item.id) },
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
/* 整个组件 */
.all_information {
  background-color: #fff;
  margin-top: 0.1rem;
  /* 单元格信息 */
  .van-cell-group {
    display: flex;
    /* 图片 */
    .van-badge__wrapper {
      z-index: 99999;
      /* 小红点位置 */
      /deep/.van-badge--fixed {
        top: 0.2rem;
        right: 0.03rem;
        border: none;
      }
    }
    img {
      width: 0.35rem;
      height: 0.35rem;
      padding: 0.15rem 0 0 0.05rem;
    }

    .van-cell,
    .van-icon {
      color: #aaa;
    }
    .van-icon {
      img {
        width: 0.1rem;
        height: 0.1rem;
      }
    }
  }
}
</style>